{extend name="public:base" /}

{block name="body"}
{include file="channel/_bread" title="批量添加"/}
<div id="page-wrapper" class="container-fluid">
    <div class="page-header" style="border:0;">
        <div class="btn-toolbar list-toolbar" role="toolbar" aria-label="Toolbar with button groups">
            <a href="javascript:" @click="addRow" class="btn btn-outline-primary mr-2">
                <i class="ion-md-add"></i>
                添加{$channel.short}
            </a>

            <div class="form-group mb-0">
                <select name="cate_id" v-model="cate_id" class="form-control mb-0">
                    <option value="{$channel.id}" data-pid="{$channel['pid']}" data-name="{$channel['name']}"
                         data-props="{$channel['props']}">{$channel.title}</option>
                    {foreach $category as $key=>$v}
                    <option value="{$v.id}" data-pid="{$v['pid']}" data-name="{$v['name']}"
                         data-props="{$v[' props']}">
                         {$v.html} {$v.title}
                    </option>
                    {/foreach}
                </select>
            </div>
        </div>
    </div>
    <div id="page-content">
        <table class="table table-hover table-striped">
            <thead>
                <tr>
                    <th width="50">编号</th>
                    <th>封面图</th>
                    <th>标题</th>
                    <th>分类</th>
                    {volist name="fields" id="field"}
                    <th>{$field.title}</th>
                    {/volist}
                    <th>作者</th>
                    <th>状态</th>
                    <th width="160">&nbsp;</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in lists">
                    <td width="50">{{index}}</td>
                    <td>{{item.cover}}</td>
                    <td>
                        <input class="form-control" v-model="item.title"/>
                    </td>
                    <td>
                        <select v-model="item.cate_id" class="form-control">
                            <option :value="channel.id" data-pid="channel.pid" data-name="channel.name"
                         :data-props="channel.props">{{channel.title}}</option>
                            <option v-for="cate in categories" :value="cate.id">
                                {{cate.html}} {{cate.title}}
                            </option>
                        </select>
                    </td>
                    <td v-for="field in fields">{{item[field.name]}}</td>
                    <td><input class="form-control" v-model="item.author"/></td>
                    <td>
                        
                    </td>
                    <td width="160">
                        <a href="javascript:" @click="delRow(index)">删除</a>
                    </td>
                </tr>
            </tbody>
        </table>

        <div class="form-group submit-btn">
            <input type="hidden" name="id" value="{$article.id}">
            <button type="submit" class="btn btn-primary">全部保存</button>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script type="text/javascript" src="__STATIC__/vue/2.6/vue.min.js"></script>
<script type="text/javascript">

    jQuery(function ($) {
        var app = new Vue({
            el: '#page-wrapper',
            data: {
                channel: JSON.parse('{$channel|json_encode|raw}'),
                lists: [],
                cate_id: '{$cate_id}',
                categories: JSON.parse('{$category|json_encode|raw}'),
                fields: JSON.parse('{$fields|json_encode|raw}'),
            },
            mounted() {

            },
            methods: {
                addRow() {
                    this.lists.push({
                        cate_id:this.cate_id,
                    });
                },
                delRow(i) {
                    this.lists.splice(i, 1);
                },
                saveAll() {
                    $.post({

                    })
                },
            }
        });

    })
</script>
{/block}